<template>
  <div>
    <div class="top-color"></div>
    <div class="code-box">
      <div>
        <img :src="successPic" alt />
      </div>
      <div class="code-body">
        <div class="body-title">举报进度查询码</div>
        <ul class="body-num">
          <li class="body-num-every" v-for="(item,index) in list" :key="index">{{item}}</li>
        </ul>
        <div class="num-tips">请妥善保管此查询码，查询进度需提供此查询码</div>
        <!--<div class="num-copy">复制到剪切板</div>-->
        <template>
          <el-button
            :plain="true"
            v-clipboard:copy="num"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
          >复制到剪切板</el-button>
        </template>
      </div>
    </div>
  </div>
</template>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list:[],
      successPic: require("@/assets/image/success.png"),
      num:"",
    };
  },
  computed:{
    dataMa(){
      return this.$route.params.data
    }
  },
  created(){
    this.ToString()
  },
  methods: {
    onCopy: function(e) {
      //   alert("You just copied: " + e.text);
      this.$message({
        message: "已成功复制到剪切板",
        type: "success",
        center: true
      });
    },
    onError: function(e) {
      this.$message.error('复制失败，请重新复制！');
    },
    ToString(){
      if(this.dataMa){
        this.list=this.dataMa.split("")
        this.num=this.dataMa
      }
    },
  }
};
</script>
<style lang="less" scoped>
.top-color {
  width: 100%;
  height: 30px;
  background-color: #f2f2f2;
}
.code-box {
  padding: 54px 40px;
}
.code-body {
  width: 500px;
  margin: 0 auto;
  height: 303px;
  position: relative;
}
.body-num {
  display: flex;
  justify-content: space-between;
}
.body-title {
  width: 140px;
  height: 28px;
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: rgba(51, 51, 51, 1);
  line-height: 28px;
  margin: 0 auto;
  margin-top: 49px;
  margin-bottom: 45px;
}
.body-num-every {
  width: 75px;
  height: 75px;
  background: rgba(255, 255, 255, 1);
  border-radius: 2px;
  border: 2px solid rgba(221, 221, 221, 1);
  text-align: center;
  font-size: 52px;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 73px;
}
.num-tips {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  line-height: 22px;
  text-align: center;
  margin-top: 33px;
}
.num-copy {
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(20, 123, 253, 1);
  line-height: 46px;
  width: 178px;
  height: 46px;
  border-radius: 5px;
  border: 1px solid rgba(20, 123, 253, 1);
  text-align: center;
  margin: 0 auto;
  margin-top: 50px;
  cursor: pointer;
}
/deep/ .el-button {
  width: 178px;
  height: 46px;
  border-radius: 5px;
  border: 1px solid rgba(20, 123, 253, 1);
  margin-top: 50px;
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(20, 123, 253, 1);
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}
</style>